<template>
	<el-container >
		<el-header class = "header">
		</el-header>
		<el-container >
			<el-main class = "main"  >
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="left" label-width="0px" class="demo-ruleForm login-container">
				    <h3 class="title">系统登录</h3>
				    <el-form-item prop="account">
				      <el-input type="text" v-model="ruleForm.account" auto-complete="off" placeholder="账号"></el-input>
				    </el-form-item>
				    <el-form-item prop="password">
				      <el-input type="password" v-model="ruleForm.password" auto-complete="off" placeholder="密码"></el-input>
				    </el-form-item>
				    <el-form-item style="width:100%;">
				      <el-button type="primary"  style="width:100%;" @click="submitForm('ruleForm')" :loading="logining">登录
				      </el-button>
				      <!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
				    </el-form-item>
			  	</el-form>
			</el-main>
	  	</el-container>
	  	<el-footer>
	  	</el-footer>
	</el-container>
</template>
<<style type="text/css" >
	.main{
		max-width: 300px;
		margin: 100px auto;
		align-items: center;

	}
	.header{
		height:30%;
	}

</style>
<<script>
	export default {// 
		data() {
	      return {
	      	logining: false ,
	      	pageLoading: true,
	      	ruleForm: { // 表单校验
	      		account: '13127682098', // 帐号
	      		password: '123456',
	      	},rules: { // 字段校验规则
	      		account: [
	      			{ required: true , message : '帐号不能为空' , trigger: 'blur' },
	      			{ min: 6 , message: '请填写正确的帐号' , trigger: 'blur' }
	      		],
	      		password: [
	      			{ required: true , message: '密码不能为空' , trigger: 'blur' },
	      			{ min: 6 , message: '密码长度不能为空' , trigger: 'blur' }
	      		]
	      	}
	      }
	    },
	    created: function(){
	    	//this.logining = false;
	    	// this.pageLoading = true;
	    },
	    methods:{
	    	submitForm(formName) {
	    		var that = this;
		        this.$refs[formName].validate((valid) => {
		          if (valid) {
		          	console.log(that.ruleForm)
		            that.$axios.post("login" , {"userName":that.ruleForm.account,"password" : that.ruleForm.password}).then(function(response){
		            	if(response.data.code == 0){
		            		localStorage.setItem("token", response.data.data);
		            		
		            		 that.$router.push({
					            name : "Home"
					        })
		            	}else{
		            		that.$message.error(response.data.msg);
		            	}
		            })
		          } else {
		          
		            return false;
		          }
		        });
		    },
		    resetForm(formName) {
		        this.$refs[formName].resetFields();
		      }
		    }
	}
</script>
